<template>
  <div class="searchPage">
    <div class="search">
      <input
        type="text"
        placeholder="请输入想去的地方, 比如:'广州'"
        v-model="cityName"
        @keyup.enter="SearchCity"
      />
      <span class="el-icon-search" @click="SearchCity"></span>
    </div>

    <span class="gray"> 推荐:</span>
    <div class="recommendPlace" v-for="city in recommendCity" :key="city.id">
      <span @click="sendCity(city)">
        {{ city.name }}
      </span>
    </div>
    <div class="recommendWay">
      <span>推荐攻略</span>
      <div type="primary" @click="$router.push('/post/edit')">
        <el-button type="primary" icon="el-icon-edit" circle>写游记</el-button>
      </div>
      <!-- <el-button type="primary" @click="$router.push('/post/edit')" icon="el-icon-edit" circle>
        写游记</el-button
      >  -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageSize: 5,
      pageIndex: 0,
      cityName: [],
      recommendCity: [
        {
          name: "广州",
          id: 0,
        },
        {
          name: "上海",
          id: 1,
        },
        {
          name: "北京",
          id: 2,
        },
      ],
    };
  },
  methods: {
    SearchCity() {
      if (this.cityName == "") {
        return this.$message.error("搜索不能为空");
      }
      this.$axios({
        url: "/posts",
        params: {
          city: this.cityName,
        },
      }).then((res) => {
        console.log(res.data);
        if (res.data.data.length == 0) {
          this.$confirm("没有该搜索结果,准备回到首页", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
            center: true,
          }).then(() => {
            this.$router.go(0);
          });
        }
        this.$emit("sendData", res.data);
        // this.$emit("sendTotal", res.data.total);
      });
    },
    sendCity(city) {
      this.$axios({
        url: "/posts",
        params: {
          city: city.name,

          _start: this.pageIndex,
          _limit: this.pageSize,
        },
      }).then((res) => {
        console.log(res.data);
        if (res.data.data.length == 0) {
          this.$message.error("没有该搜索结果");
        }
        this.$emit("sendData", res.data);
      });
    },
  },
};
</script>
<style lang="less" scoped>
.gray {
  font-size: 12px;
  color: #666;
}
.recommendWay {
  padding-top: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  span {
    color: #ffa500;
    border-bottom: 2px solid #ffa500;
    padding-bottom: 12px;
    font-size: 18px;
    width: 72px;
  }

  .element.style {
    text-align: right;
  }

  .el-button.is-circle {
    padding: 10px;
    border-radius: 0;
    width: 83px;
    height: 100%;
  }
  .el-button--primary {
    padding: 0;
  }
}
// 搜索框样式
.search {
  padding-left: 16px;
  border: 3px solid #ffa500;
  display: flex;
  align-items: center;
  input {
    outline: none;
    border: none;
    // background-color: #0a0;
    flex: 1;
    padding: 6px 0;
  }

  //   搜索框字体图标
  .el-icon-search {
    padding-right: 6px;
    color: #ffa500;
    font-weight: 700;
    font-size: 22px;
  }
}

// 搜索框下方推荐地方
.recommendPlace {
  margin: 6px 0;
  font-size: 12px;
  color: #666;
  display: inline-block;
  span {
    margin-right: 4px;
    cursor: pointer;
    &:hover {
      border-bottom: 1px solid #000;
    }
  }
}
</style>